<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('session-durations.title')}} </h2>
            <cly-tooltip-icon :tooltip="i18n('session-durations.description')" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
        </template>
    </cly-header>
    <cly-main>
        <cly-date-picker-g class="session-durations-date-picker-container"></cly-date-picker-g>
        <cly-section>
            <cly-chart-bar :option="sessionDurationsOptions" :height="400" v-loading="isLoading" :force-loading="isLoading"></cly-chart-bar>
        </cly-section>
        <cly-section>
            <cly-datatable-n  :rows="sessionDurationsRows" :resizable="true" :force-loading="isLoading">
                <template v-slot="scope">
                    <el-table-column :sortable="true" prop="duration" :label="i18n('common.session-duration')" :sort-method="sortDurationBuckets">
                    </el-table-column>
                    <el-table-column sortable="custom" prop="numberOfSessions" :label="i18n('common.number-of-sessions')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.numberOfSessions)}}
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="numberOfSessions" column-key="percentage" :label="i18n('common.percent')">
                        <template slot-scope="scope">
                            <div class="bu-level-left">
                                <div class="bu-level-item slipping-away-users-table-data-item">
                                    <span>{{scope.row.percentage}}%</span>
                                </div>
                                <cly-progress-bar  :percentage="parseInt(scope.row.percentage)" :color="progressBarColor" > </cly-progress-bar>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>       
    </cly-main>
</div>